iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Modern Web

React 前端工程師的兩把刷子系列 第 20

[Day20] TS:用型別建立型別:當個 TypeScript 的型別魔術師

  • 分享至 

  • xImage
  •  

寫到第 20 天,關於如何建立 Utility Type 所需的知識也差不多吿一個段落,今天就來做個簡單的小結。

建立 Utilty Types 時

在前幾天的範例中,讀者會發現到要寫 Utility Types 比較簡單的方式會是針對一個實際的型別去達到你想完成的功能,接著再把可以替換成變數的內容抽換出來。因此如果要建立自己的 Utility Types 可以有兩個簡單的步驟:

  • 先透過實際的範例把功能寫成來
  • 把可以變成參數的地方抽出來

理解 Utility Types 時

如果是要試著理解別人寫的 Utility Types 的話,同樣有幾個重點:

  • 建立適當的斷句,幫助理解
  • 不確定時就帶入實際的型別試試看
  • 不知道為什麼要這樣時,就拿掉試試看會發生什麼事

一開始看別人寫的 Utility Types 時很容易陷在茫茫的 <>=?: 這些符號當中,適時的建立斷句對於幫助理解就變得很重要。在建立好了斷句後,可以試著用一些實際的型別帶進去參數當中,看看會得到什麼結果,或者在改變 Conditional Type ?: 後回傳的結果,改成比較簡單的一些回傳值,幫助自己判斷。

之所以會想寫這個主題

過去我在打開型別定義的原始碼時,常常覺得像是在看天書一樣,完全不知道要這麼下手,但實際上在有了這些知識之後,這些東西並沒有想到這麼難(不是不難,而是至少能夠逐漸理解),因此希望透過這 20 天的主題,能夠讓讀者不再害怕原始碼:

  • 不要求一開始就能寫出複雜的 Utility Types
  • 碰到需求的時候可以自己試著練習寫寫看 Type Definition
  • 碰到問題的時候能夠試著打開原始碼了解可能的問題所在

最後,對這個主題能夠開始有所涉略,很重要的是 OneDegree 同事們給我的啟發,在建立型別的過程中很容易打結,這時候有能一起討論的同事,會是很重要的一盞明燈,因此特別感謝他們。

但鐵人賽還有 10 天,明天要寫什麼呢?明天再來想想看吧!


上一篇
[Day19] TS:什麼!泛型的參數還能有預設值?
下一篇
[Day21] Conditional Chains
系列文
React 前端工程師的兩把刷子30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0

期待 PJ 在 MOPCON 中講 TypeScript 讓我可以獲得更多把刷子!

0

想請問 PJ 為什麼今天沒有推薦同事的文章

我要留言

立即登入留言